import {Avatar, Box, Divider, Link, Mark, Static} from '../components'
import {omitStr,compose} from '../util'
import {currentUser,withQuery,withData} from '../hoc'
import JOB_TAG_FILTER from '../../web-app-share/graphql/JobTagFilter.graphql'


const InfoBox = ({param, href, info: {position, salary, jobId, address, age, education, major, number, time, companyState, company, jobResponse},jobTagFilter}) => {
    return (
        <Link href={{pathname: href, query: {id: param}}}>
            <div className='info-box'>
                <Box width='100%' height='100%' padding='1rem 0' direction='column' style={{borderBottom:'1px solid #f2f2f5'}}>
                    <Box wiidth='100%' flex='flex' justify='space-between'>
                        <Box>
                            <Box marginBottom='.5rem'>
                                <Static label={omitStr(position, 0, 11)} fontSize='1rem' fontWeight='400'
                                        marginRight='1rem'
                                        hover='#35c0c1'/>
                                <Mark title={salary} background='#fa6a43' lineHeight='18px'/>
                            </Box>
                            <Box marginBottom='.5rem'>
                                <Static label={address} color='#9fa3b0'/>
                                <Divider type="vertical"/>
                                <Static label={age} color='#9fa3b0'/>
                                <Divider type="vertical"/>
                                <Static label={education} color='#9fa3b0'/>
                            </Box>
                            <Box>
                                {jobTagFilter.jobTag.map((tag) => (
                                    <Mark title={tag.name}
                                          key={tag.id}
                                          marginRight='.4rem'
                                          lineHeight='18px'
                                          border='1px solid #e8e6e6'
                                          color='#9fa3af'
                                    />
                                ))}
                            </Box>

                        </Box>
                        <Box>
                            <Static label={company} fontSize='1rem' fontWeight='400'/>
                            <Box>
                                <Static label={major} color='#9fa3b0'/>
                                <Divider type="vertical"/>
                                <Static label={companyState} color='#9fa3b0'/>
                                <Divider type="vertical"/>
                                <Static label={number} color='#9fa3b0'/>
                            </Box>
                        </Box>
                        <Box flex='flex' align='flex-end' direction='column'>
                            <Static label={jobResponse || '-'} fontSize='.875rem' style={{marginLeft: '.5rem'}}/>
                            <Static label={time} color='#9fa3b0'/>
                        </Box>

                    </Box>
                </Box>
            </div>

            <style jsx>{`
                .info-box{
                    width:100%;
                    height:7rem;
                    padding: 0 1rem;

                    &:hover{
                        background: #f1f9f9;
                    }
                }
            `}</style>
        </Link>
    )
};

export default compose(
    withData,
    withQuery({
        gql:JOB_TAG_FILTER,
        options: ({info:{jobId}}) =>({
            input:{jobId}
        })
    })
)(InfoBox)